<template>
  <div class="channel-mobile">
    <div class="channel-mobile-banner">
      <div class="channel-mobile-banner-info">
        <div class="channel-mobile-banner-info-desc">
          <p>品达集团合伙人计划</p>
          <span>与各行业合作伙伴携手<br />打造共生、共赢的数智生态体系</span>
        </div>
        <div class="channel-mobile-banner-info-btn">
          <vs-button @click="openInfoDialog">我要加盟</vs-button>
        </div>
      </div>
      <div class="channel-mobile-banner-img"
        ><img src="https://static.pdwl.net/jituan/images/mobile/channel/banner.png" alt=""
      /></div>
    </div>
    <div class="channel-mobile-fwzc">
      <div class="channel-mobile-title">
        <h3>服务支持</h3>
        <p>携手品达集团 共掘万亿市场</p>
      </div>
      <div class="channel-mobile-fwzc-body">
        <div
          v-for="(item, idx) in fwzcArr"
          :key="idx"
          class="channel-mobile-fwzc-body-item"
        >
          <div class="channel-mobile-fwzc-body-item-t">
            <i :class="['iconfont', item.icon]"></i
            ><span>{{ item.title }}</span>
          </div>
          <div class="channel-mobile-fwzc-body-item-b">
            {{ item.desc }}
          </div>
        </div>
      </div>
    </div>
    <div class="channel-mobile-hhtj">
      <div class="channel-mobile-title dark">
        <h3>合伙条件</h3>
        <p>合伙共创是你我的选择，也是时代的选择</p>
      </div>
      <div class="channel-mobile-hhtj-body">
        <div
          v-for="(item, idx) in hhtjArr"
          :key="idx"
          class="channel-mobile-hhtj-body-item"
        >
          <div class="channel-mobile-hhtj-body-item-l"
            ><span>0{{ idx + 1 }}</span></div
          >
          <div class="channel-mobile-hhtj-body-item-r">{{ item.desc }}</div>
        </div>
      </div>
      <div class="channel-mobile-hhtj-step">
        <div
          v-for="(item, idx) in hhtjStepArr"
          :key="idx"
          class="channel-mobile-hhtj-step-item"
        >
          <div class="channel-mobile-hhtj-step-item-l">
            <i :class="['iconfont', item.icon]"></i>
            <p>{{ item.title }}</p>
          </div>
          <div
            v-if="idx < hhtjStepArr.length - 1"
            class="channel-mobile-hhtj-step-item-r"
          >
            <i class="iconfont icon-dingwei"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="channel-mobile-gckh">
      <div class="channel-mobile-title">
        <h3>共创客户</h3>
        <p>财富密码，全国启动</p>
      </div>
      <div class="channel-mobile-gckh-body">
        <div
          class="channel-mobile-gckh-body-item channel-mobile-gckh-body-item-text"
        >
          <div class="channel-mobile-gckh-body-item-t">
            <h6>招商扶持</h6>
            <p>牛视代理商经验交流</p>
            <i class="iconfont icon-jiantou_youxia"></i>
          </div>
          <div class="channel-mobile-gckh-body-item-b">
            <img src="https://static.pdwl.net/jituan/images/channel/icon8.png" alt="" />
          </div>
        </div>
        <div class="channel-mobile-gckh-body-item together">
          <div class="channel-mobile-gckh-body-item-t">
            <img src="https://static.pdwl.net/jituan/images/channel/icon5.png" alt="" />
          </div>
          <div class="channel-mobile-gckh-body-item-b">
            <img src="https://static.pdwl.net/jituan/images/channel/icon6.png" alt="" />
            <img src="https://static.pdwl.net/jituan/images/channel/icon7.png" alt="" />
          </div>
        </div>
        <div
          v-for="(item, idx) in gckhArr"
          :key="idx"
          class="channel-mobile-gckh-body-item"
        >
          <div class="channel-mobile-gckh-body-item-t">
            <img :src="item[0].img" alt="" />
          </div>
          <div class="channel-mobile-gckh-body-item-b">
            <img :src="item[1].img" alt="" />
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from '@/components/footer/index.vue';
export default {
  components: { Footer },
  data() {
    return {
      fwzcArr: [
        {
          title: '品牌支持',
          icon: 'icon-Frame',
          desc: '全面品牌宣传获客，渠道获取客户线索分发。',
        },
        {
          title: '产品支持',
          icon: 'icon-Frame-2',
          desc: '集团全系列产品，按销售额分成。',
        },
        {
          title: '会销支持',
          icon: 'icon-GroupTicket',
          desc: '专业会销讲师团队，落地会销扶持。',
        },
        {
          title: '运营支持',
          icon: 'icon-yunyingjingli-',
          desc: '销售团队搭建、运营团队搭建、客户交付，全流程陪跑。',
        },
        {
          title: '资金支持',
          icon: 'icon-Frame-3',
          desc: '优秀运营中心需要资金，集团可入股，提供资金支持。',
        },
        {
          title: '法务支持',
          icon: 'icon-Frame-5',
          desc: '合同审核、协议签订等专业法务团队支持。',
        },
      ],
      hhtjArr: [
        { desc: '认同品达商业模式，同意相关服务条款及市场定价。' },
        { desc: '符合国家相关法律法规规定，具备基本从业资格的企业。' },
        { desc: '熟悉当地区域经济发展状况，能够拓展本地垂直服务商加盟体系。' },
        { desc: '接受总部系统派单服务，快速响应客户需求，依法履行服务协议。' },
        { desc: '专职服务团队，拥有固定的办公场地，具备开展相关办公条件。' },
      ],
      hhtjStepArr: [
        { title: '提交申请', icon: 'icon-yiwancheng2' },
        { title: '审核资料', icon: 'icon-shenhemokuai2' },
        { title: '洽谈合作', icon: 'icon-talk-s' },
        { title: '签约合作', icon: 'icon-hezuo' },
      ],
      gckhArr: [
        [
          { img: 'https://static.pdwl.net/jituan/images/channel/icon9.png' },
          { img: 'https://static.pdwl.net/jituan/images/channel/icon10.png' },
        ],
        [
          { img: 'https://static.pdwl.net/jituan/images/channel/icon11.png' },
          { img: 'https://static.pdwl.net/jituan/images/channel/icon12.png' },
        ],
      ],
    };
  },
  methods: {
    openInfoDialog() {
      this.$router.push({name:"formPage"})
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.channel-mobile {
  overflow: hidden;
  &-title {
    text-align: center;
    padding: 80px 0 60px 0;
    margin: 0 auto;
    h3 {
      font-size: 46px;
      font-weight: bold;
      color: #000000;
      line-height: 50px;
    }
    p {
      margin-top: 40px;
      height: 18px;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }
    &.dark {
      h3,
      p {
        color: #ffffff;
      }
    }
  }
  &-banner {
    position: relative;
    &-img {
      img {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
      }
    }
    &-info {
      width: 70%;
      position: absolute;
      left: 20px;
      top: 22%;
      z-index: 1;
      color: #ffffff;
      &-desc {
        p {
          margin-top: 40px;
          font-size: 50px;
          font-weight: bold;
          line-height: 54px;
        }
        span {
          display: block;
          font-size: 36px;
          line-height: 60px;
          margin-top: 40px;
        }
      }
      &-btn {
        margin-top: 50px;
      }
    }
  }
  &-fwzc {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/channel/fwzc_bg.png);
    background-size: 100% auto;
    padding-bottom: 80px;
    &-body {
      margin: 20px;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;
      &-item {
        display: inline-block;
        background: #f0f2f5;
        min-width: 50%;
        flex: 1;
        height: 300px;
        border-radius: 6px;
        margin: 20px;
        border: 1px solid #ffffff;
        &-t {
          height: 90px;
          line-height: 90px;
          background: linear-gradient(124deg, #006fff 0%, #62dea6 100%);
          border-radius: 6px 6px 0px 0px;
          color: #ffffff;
          text-align: center;
          font-size: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-size: 54px;
            margin-right: 20px;
          }
        }
        &-b {
          padding: 60px 40px;
          font-size: 24px;
          color: #000000;
          line-height: 40px;
          white-space: normal;
        }
      }
    }
  }
  &-hhtj {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/channel/hhtj_bg.png);
    background-size: 100% auto;
    &-body {
      overflow: hidden;
      &-item {
        margin-left: 20px;
        display: flex;
        padding: 50px 40px;
        &:nth-child(odd) {
          background: linear-gradient(
            90deg,
            rgba(46, 163, 255, 0.4) 0%,
            rgba(46, 163, 255, 0) 100%
          );
        }
        &-l {
          width: 100px;
          height: 100px;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          &::after {
            content: '';
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 1;
            width: 70px;
            height: 70px;
            border-radius: 6px 6px 6px 6px;
            transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            border: 1px solid #ffffff;
            display: block;
          }
          span {
            color: #ffffff;
            font-size: 28px;
            margin: -4px 0 0 -4px;
            display: block;
          }
        }
        &-r {
          flex: 1;
          margin: 10px 0 0 20px;
          font-size: 28px;
          color: #ffffff;
          line-height: 44px;
          padding-right: 20px;
        }
      }
    }
    &-step {
      padding: 60px 40px;
      color: #ffffff;
      display: flex;
      &-item {
        flex: 1;
        display: flex;
        &-l {
          flex: 1;
          text-align: center;
          margin: 0 auto;
          i {
            font-size: 60px;
            height: 62px;
            line-height: 62px;
            background: linear-gradient(150deg, #006fff 0%, #62dea6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block;
          }
          p {
            font-size: 24px;
            line-height: 28px;
            display: block;
          }
        }
        &-r {
          font-size: 30px;
          height: 32px;
          line-height: 32px;
          color: rgba(255, 255, 255, 0.6);
          margin-top: 15px;
          i {
            transform: rotate(45deg);
            transform: -webkit-rotate(45deg);
            display: block;
          }
        }
        &:last-child {
          .channel-mobile-hhtj-step-item-l i {
            font-size: 50px;
          }
        }
      }
    }
  }
  &-gckh {
    &-body {
      margin: 20px 20px 60px 20px;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;
      &-item {
        display: inline-block;
        min-width: 80%;
        flex: 1;
        margin: 20px;
        img {
          margin: 0;
          padding: 0;
          display: block;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        &-t {
          height: 300px;
        }
        &-b {
          margin-top: 30px;
          height: 300px;
        }
        &-text {
          .channel-mobile-gckh-body-item-t {
            background: linear-gradient(124deg, #006fff 0%, #62dea6 100%);
            padding: 0 30px;
            overflow: hidden;
            h6 {
              font-size: 28px;
              color: #ffffff;
              line-height: 30px;
              font-weight: normal;
              margin-top: 60px;
            }
            p {
              margin-top: 40px;
              font-size: 40px;
              color: #ffffff;
              line-height: 44px;
            }
            i {
              display: block;
              text-align: right;
              color: #ffffff;
              font-size: 60px;
              line-height: 60px;
              margin-top: 50px;
            }
          }
          .channel-mobile-gckh-body-item-b {
            img {
              margin: 0;
              padding: 0;
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
        &.together {
          .channel-mobile-gckh-body-item-b {
            display: flex;

            img {
              margin-top: -30px;
              flex: 1;
              height: 330px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.channel-mobile {
  .vs-button {
    background: linear-gradient(90deg, #006fff 0%, #60dca7 100%);
    font-size: 24px;
    padding: 0;
    width: 200px;
    margin: 0px;
    border-radius: 8px;
  }
}
</style>
